From 012a1dc35c69cb51ff15b21f8303787b5299a626 Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Sat, 12 Sep 2026 10:58:39 +0200
Subject: improve projects layout on mobile

---
 src/routes/projects/[id]/+page.svelte | 135 ++++++----------------------------
 1 file changed, 22 insertions(+), 113 deletions(-)

(limited to 'src/routes/projects/[id]/+page.svelte')

diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte
index 9931f40..8a3561b 100644
--- a/src/routes/projects/[id]/+page.svelte
+++ b/src/routes/projects/[id]/+page.svelte
@@ -15,12 +15,8 @@
 
 	let name = $state('');
 	let frequency = $state('');
-	let editingId = $state<number | null>(null);
-	let editName = $state('');
-	let editFrequency = $state('');
 
 	const frequencyDays = $derived(parseIntervalToDays(frequency));
-	const editFrequencyDays = $derived(parseIntervalToDays(editFrequency));
 
 	let showArchived = $state(false);
 	let archiveFilter = $state('');
@@ -36,12 +32,6 @@
 			(a, b) => b.overdueRatio - a.overdueRatio || a.name.localeCompare(b.name),
 		);
 	}
-
-	function startEdit(routine: RoutineState) {
-		editingId = routine.id;
-		editName = routine.name;
-		editFrequency = `${routine.frequencyDays}d`;
-	}
 </script>
 
 <main>
@@ -113,94 +103,30 @@
 	<ul class="item-list">
 		{#each sorted(data.routines) as routine (routine.id)}
 			<li class="item-row item-row--card routine-row">
-				{#if editingId === routine.id}
-					<form
-						class="edit-form"
-						method="POST"
-						action="?/editRoutine"
-						use:enhance={() => {
-							return async ({ result, update }) => {
-								if (result.type === 'failure') {
-									// Keep the edit form open so the error is visible.
-									await update({ reset: false });
-									return;
-								}
-								editingId = null;
-								await update({ reset: false });
-							};
-						}}
-					>
-						{#if form?.error}
-							<p class="error edit-error">{form.error}</p>
-						{/if}
-						<input type="hidden" name="id" value={routine.id} />
-						<input
-							class="form-input"
-							type="text"
-							name="name"
-							bind:value={editName}
-						/>
-						<input
-							class="form-input frequency-input"
-							class:input-invalid={editFrequency !== '' &&
-								editFrequencyDays === null}
-							type="text"
-							name="frequencyDays"
-							bind:value={editFrequency}
-							placeholder="2w"
-							autocomplete="off"
-							aria-label="Intervalle (ex: 1d, 2w, 3m)"
+				<form method="POST" action="?/complete" use:enhance>
+					<input type="hidden" name="id" value={routine.id} />
+					<button type="submit" class="btn-ghost">
+						<StatusBadge
+							status={routine.status}
+							overdueDays={routine.overdueDays}
 						/>
-						<button
-							class="btn-primary"
-							type="submit"
-							disabled={!editName.trim() || editFrequencyDays === null}
-						>
-							OK
-						</button>
-						<button
-							class="btn-ghost"
-							type="button"
-							onclick={() => (editingId = null)}>✕</button
-						>
-					</form>
-				{:else}
-					<StatusBadge
-						status={routine.status}
-						overdueDays={routine.overdueDays}
-					/>
-					<div class="routine-info">
-						<a
-							class="routine-name"
-							href="/projects/{data.project.id}/routine/{routine.id}"
-							>{routine.name}</a
-						>
-						<span class="routine-meta">
-							{formatFrequency(routine.frequencyDays)}
-							{#if routine.lastDoneAt}
-								· fait le {formatDayMonth(routine.lastDoneAt)}
-							{:else}
-								· jamais fait
-							{/if}
-						</span>
-					</div>
-					<form method="POST" action="?/complete" use:enhance>
-						<input type="hidden" name="id" value={routine.id} />
-						<button class="btn-done" type="submit">Fait</button>
-					</form>
-					<button
-						class="btn-ghost"
-						type="button"
-						aria-label="Modifier"
-						onclick={() => startEdit(routine)}>✎</button
+					</button>
+				</form>
+				<div class="routine-info">
+					<a
+						class="routine-name"
+						href="/projects/{data.project.id}/routine/{routine.id}"
+						>{routine.name}</a
 					>
-					<form method="POST" action="?/archiveRoutine" use:enhance>
-						<input type="hidden" name="id" value={routine.id} />
-						<button class="btn-ghost" type="submit" aria-label="Archiver">
-							&times;
-						</button>
-					</form>
-				{/if}
+					<span class="routine-meta">
+						{formatFrequency(routine.frequencyDays)}
+						{#if routine.lastDoneAt}
+							· fait le {formatDayMonth(routine.lastDoneAt)}
+						{:else}
+							· jamais fait
+						{/if}
+					</span>
+				</div>
 			</li>
 		{/each}
 	</ul>
@@ -303,23 +229,6 @@
 		color: var(--text-secondary);
 	}
 
-	.edit-form {
-		display: flex;
-		flex-grow: 1;
-		gap: 0.5rem;
-		align-items: center;
-		flex-wrap: wrap;
-	}
-
-	.edit-error {
-		width: 100%;
-	}
-
-	.edit-form .form-input {
-		flex: 1;
-		padding: 0.5rem 0.75rem;
-	}
-
 	.frequency-input {
 		width: 4.5rem;
 		flex-shrink: 0;
-- 
cgit v1.3